<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="选择日期/出行人数" title-width='300'></u-navbar>
		<view class="date">
			<calendar :datePrice='datePrice' @changeDate="changeDate"></calendar>
		</view>
		<view class="people">
			<view class="lable">
				选择出行人数
			</view>
			<view class="adult">
				<text>成人数</text>
				<u-number-box v-model="adultNum" @change="adultChange" :min="1"></u-number-box>
			</view>
			<view class="child">
				<text>儿童数</text>
				<u-number-box v-model="childNum" @change="childChange" :min="0"></u-number-box>
			</view>
			<view class="tip">
				儿童年龄不得超过12岁（不含),超龄将影响出行
			</view>
		</view>
		<view class="btn" @click="nextFn">
			下一步，填写订单
		</view>
	</view>
</template>

<script>
	import calendar from '@/components/calendar/lv-calendar.vue'
	import myRequest from '@/api/index.js'
	export default {
		components: {
			calendar
		},
		data() {
			return {
				id: '', // 线路id
				childNum: 0,
				adultNum: 1,
				datePrice: [],
				tripTime: '', //出行时间
				childPrice:'',
				price:'',//当前价格
        selectDayItem:{},
        vip_price:0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDateTravel()

		},
		methods: {
			adultChange(e) {
				this.adultNum = e.value
			},
			childChange(e) {
				this.childNum = e.value
			},
			// 下一步
			nextFn() {
				let {
					tripTime
				} = this
				if (!tripTime) {
					uni.showToast({
						title: '请选择出行日期',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url:
              '../fillOrder/fillOrder?tripTime=' + this.tripTime + '&childNum=' + this.childNum + '&adultNum=' + this.adultNum + '&childPrice='+this.childPrice+'&price='+this.price+'&vip_price='+this.vip_price
				})
			},
			// 旅游排期
			async getDateTravel() {
				let that = this
				let {
					id
				} = this
				let res = await myRequest.getCalendar({
					id: id
				})
				if (res.status) {
					let date = new Date()
					let year = date.getFullYear()
					res.data.forEach(function(i) {
						i.data.forEach(function(k) {
							let prcieObj = {
								date: '',
								price: '',
								vip_price: '',
								policy:[]
							}
							prcieObj.price = k.price.split('.')[0]
							prcieObj.vip_price = k.vip_price.split('.')[0]
							prcieObj.date = year + '-' + that.formatNum(i.month) + '-' + that.formatNum(k.day)
							prcieObj.policy= k.policy
							that.datePrice.push(prcieObj)
						})
					})
				}
			},
			// 日期格式化
			formatNum(num) {
				return num < 10 ? '0' + num : num + '';
			},
			// 日期选择
			changeDate(val) {
				//let that =this
				let policy = []
        let data = {}
				this.tripTime = val.date
				this.price = val.price
        //this.vip_price =

				this.datePrice.forEach(item=>{
					if(item.date == val.date){
            data = item
						policy = item.policy
					}
				})
        this.vip_price = data.vip_price
        //console.log(data)
				policy.forEach(item=>{
          this.childPrice = item.no_bed_price
					// if(item.age_max == 17 && item.age_min ==3){
					//
					// }
				})
        //this.$store.commit('changeTravelDayInfo',data)
			},
			// 跳转
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.date {}

	.people {
		width: 710rpx;
		height: 356rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 32rpx auto 0;
		padding: 0 20rpx;

		.lable {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular;
			color: #333333;
			border-bottom: 2rpx solid #F2F2F7;
		}

		.adult,
		.child {
			width: 100%;
			height: 88rpx;
			border-bottom: 2rpx solid #F2F2F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tip {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 80rpx;
		}
	}

	.btn {
		margin: 60rpx auto 0;
		width: 670rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
		border-radius: 16rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		line-height: 100rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
